<template>
  <div class="home-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="welcome-section">
          <h1>OKR 管理系统</h1>
          <p>目标与关键结果 (Objectives and Key Results) 是一种目标管理方法，帮助团队设定并跟踪目标。</p>
          
          <div v-if="!authStore.isAuthenticated" class="auth-buttons">
            <el-button type="primary" @click="router.push('/login')">登录</el-button>
            <el-button @click="router.push('/register')">注册</el-button>
          </div>
          
          <div v-else class="dashboard-buttons">
            <el-button type="primary" @click="router.push('/objectives')">我的目标</el-button>
            <el-button type="success" @click="router.push('/teams')">团队管理</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" class="features-section">
      <el-col :span="8">
        <el-card>
          <h3>目标管理</h3>
          <p>设定明确、可衡量的目标，追踪进度并确保团队目标一致性。</p>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card>
          <h3>团队协作</h3>
          <p>促进团队成员之间的协作，共同努力实现组织目标。</p>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card>
          <h3>进度跟踪</h3>
          <p>实时监控关键结果的进度，确保目标按计划完成。</p>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useAuthStore } from '../store/auth'

const router = useRouter()
const authStore = useAuthStore()
</script>

<style scoped>
.home-container {
  padding: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.welcome-section {
  text-align: center;
  margin-bottom: 50px;
  padding: 40px 0;
}

.welcome-section h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: #303133;
}

.welcome-section p {
  font-size: 1.2rem;
  color: #606266;
  max-width: 700px;
  margin: 0 auto 30px;
}

.auth-buttons, .dashboard-buttons {
  margin-top: 30px;
}

.auth-buttons .el-button, .dashboard-buttons .el-button {
  margin: 0 10px;
  padding: 12px 25px;
  font-size: 16px;
}

.features-section {
  margin-top: 40px;
}

.features-section .el-card {
  height: 100%;
  text-align: center;
  padding: 20px;
  transition: transform 0.3s;
}

.features-section .el-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.features-section h3 {
  margin-bottom: 15px;
  color: #303133;
}

.features-section p {
  color: #606266;
}
</style>